<template id="f7-timer">
    <span>{{message}}</span>
</template>
<script>
import Formatter from "../framework/formatter.js";
export default {
  data: function() {
    return {
      message: "00:00:00",
      timer: {
        hour: 0,
        minute: 0,
        second: 0,
        millisecond: 0,
        id: undefined
      }
    };
  },
  props: {
    format: {
      type: String,
      default: "HH:mm:ss" //HH:mm:ss:SSS
    },
    status: {
      type: String,
      default: "" //等待WAIT，开始START，暂停WAIT，停止STOP，恢复RECOVERY
    },
    offset: {
      type: Number,
      default: 1000
    },
    startDate: {
      type: Date,
      default: undefined
    }
  },
  watch: {
    status: function(val) {
      this.do(val);
    },
    timer: {
      handler(newValue) {
        this.message = this.format
          .replace("HH", Formatter.addPreZero(newValue.hour, 2))
          .replace("mm", Formatter.addPreZero(newValue.minute, 2))
          .replace("ss", Formatter.addPreZero(newValue.second, 2))
          .replace("SSS", Formatter.addPreZero(newValue.millisecond, 3));
      },
      deep: true
    }
  },
  mounted() {
    this.do(this.status);
  },
  methods: {
    do(type) {
      //等待WAIT，开始START，暂停HOLD，停止STOP，恢复RECOVERY
      if (type == "WAIT") {
        this.reset();
      } else if (type == "START") {
        this.start();
      } else if (type == "HOLD") {
        this.stop();
      } else if (type == "STOP") {
        this.stop();
      } else if (type == "RECOVERY") {
        this.recovery();
        this.start();
      }
    },
    recovery() {
      if (this.startDate != undefined) {
        this.timer.millisecond =
          new Date().getTime() - new Date(this.startDate).getTime();
        if (this.timer.millisecond > 1000) {
          this.timer.second = Math.floor(this.timer.millisecond / 1000);
          this.timer.millisecond = this.timer.millisecond % 1000;
        }
        if (this.timer.second > 60) {
          this.timer.minute = Math.floor(this.timer.second / 60);
          this.timer.second = this.timer.second % 60;
        }
        if (this.timer.minute > 60) {
          this.timer.hour = Math.floor(this.timer.minute / 60);
          this.timer.minute = this.timer.minute % 60;
        }
      }
    },
    reset() {
      window.clearInterval(this.timer.id);
      this.timer.millisecond = this.timer.hour = this.timer.minute = this.timer.second = 0;
    },
    start() {
      this.timer.id = setInterval(this.instance, this.offset);
    },
    instance() {
      this.timer.millisecond += this.offset;
      if (this.timer.millisecond >= 1000) {
        this.timer.millisecond = 0;
        this.timer.second = this.timer.second + 1;
      }
      if (this.timer.second >= 60) {
        this.timer.second = 0;
        this.timer.minute = this.timer.minute + 1;
      }

      if (this.timer.minute >= 60) {
        this.timer.minute = 0;
        this.timer.hour = this.timer.hour + 1;
      }
    },
    stop() {
      window.clearInterval(this.timer.id);
    }
  }
};
</script>